import {designPage, reactive} from "plain-design-composition";
import SourceData from '../../../data/data-2.json';
import {DemoRow} from "../../Demo/DemoRow";
import {Form, FormItem, Switch, VirtualTable} from "../../../../packages";

export const demo1 = designPage(() => {

  const state = reactive({
    state: {
      hasSummaryData: true,
      disabled: false,
    } as any
  }).state;

  const DATA = SourceData.slice(0, SourceData.length - 2);
  const summaryData = SourceData.slice(SourceData.length - 2);

  const headData = [
    [
      { title: '编号', field: 'id' },
      { title: '颜色', field: 'color' },
      { title: '名称', field: 'name' },
      { title: '日期', field: 'date' },
      { title: '评分', field: 'star' },
      { title: '尺寸', field: 'size' },
      { title: '地址', field: 'addr' },
      { title: '链接', field: 'url' },
      { title: '域名', field: 'domain' },
      { title: '协议', field: 'protocol' },
      { title: '邮箱', field: 'email' },
      { title: 'IP', field: 'ip' },
      { title: '开关', field: 'flag' },
    ]
  ];

  return () => (
    <>
      <DemoRow title="设置">
        <Form>
          <FormItem label={'禁用虚拟滚动'}>
            <Switch v-model={state.disabled}/>
          </FormItem>
          <FormItem label={'合计行'}>
            <Switch v-model={state.hasSummaryData}/>
          </FormItem>
        </Form>
      </DemoRow>
      <DemoRow title={'基本用法'}>
        <div style={{
          overflow: 'hidden',
          height: '410px',
        }}>
          <VirtualTable
            height={412}
            data={DATA}
            summaryData={state.hasSummaryData ? summaryData : undefined}
            headData={headData}
            size={40}
            headSize={40}
            width={3000}
            disabled={state.disabled}
            v-slots={{
              head: () => (
                headData.map((headRows, index) => (
                  <tr style={{ height: '40px', borderBottom: 'solid 1px #ececec', }} key={index}>
                    {headRows.map(col => (
                      <td key={col.field}>{col.title}</td>
                    ))}
                  </tr>
                ))
              ),
              default: ({ item, index, virtualIndex }) => (
                <tr key={virtualIndex} {...{ vid: index } as any} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
                  {Object.keys(DATA[0] as any).map((key: string) => (
                    <td key={key}>{(item as any)[key]}</td>
                  ))}
                </tr>
              ),
            }}
          />
        </div>

        <div style={{
          overflow: 'hidden',
          height: '410px',
          marginTop: '100px'
        }}>
          <VirtualTable
            height={412}
            data={DATA.slice(0, 200)}
            summaryData={state.hasSummaryData ? summaryData : undefined}
            headData={headData}
            size={40}
            headSize={40}
            width={3000}
            disabled={true}
            v-slots={{
              head: () => (
                headData.map((headRows, index) => (
                  <tr style={{ height: '40px', borderBottom: 'solid 1px #ececec', }} key={index}>
                    {headRows.map(col => (
                      <td key={col.field}>{col.title}</td>
                    ))}
                  </tr>
                ))
              ),
              default: ({ item, index, virtualIndex }) => (
                <tr key={virtualIndex} {...{ vid: index } as any} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
                  {Object.keys(DATA[0] as any).map((key: string) => (
                    <td key={key}>{(item as any)[key]}</td>
                  ))}
                </tr>
              ),
            }}
          />
        </div>
      </DemoRow>
    </>
  );
});
/*

export const demo2 = designPage(() => {

  const state = reactive({
    virtualRowFlag: true,
  });

  const DATA = SourceData.slice(0, SourceData.length - 2);
  const summaryData = SourceData.slice(SourceData.length - 2);

  return () => (
    <DemoRow title="行虚拟滚动">
      <Form>
        <FormItem label="开启行虚拟滚动"><Switch v-model={state.virtualRowFlag}/></FormItem>
      </Form>
      <Table
        data={DATA}
        summaryData={summaryData}
        virtual={state.virtualRowFlag}
        showRows={10}
      >
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'颜色'} field={'color'}/>
        <Plc title={'名称'} field={'name'}/>
        <Plc title={'日期'} field={'date'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'尺寸'} field={'size'}/>
        <Plc title={'地址'} field={'addr'}/>
        <Plc title={'URL'} field={'url'}/>
        <Plc title={'域名'} field={'domain'}/>
        <Plc title={'协议'} field={'protocol'}/>
        <Plc title={'邮箱'} field={'email'}/>
        <Plc title={'IP'} field={'ip'}/>
        <Plc title={'标识'} field={'flag'}/>
        <Plc title={'开始时间'} field={'dateStart'}/>
        <Plc title={'结束时间'} field={'dateEnd'}/>
      </Table>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const state = reactive({
    virtualRowFlag: true,
    virtualColFlag: true,
  });

  const DATA = SourceData.slice(0, SourceData.length - 2);
  const summaryData = SourceData.slice(SourceData.length - 2);

  return () => (
    <DemoRow title="行列虚拟滚动">
      <Form>
        <FormItem label="开启行虚拟滚动"><Switch v-model={state.virtualRowFlag}/></FormItem>
        <FormItem label="开启列虚拟滚动"><Switch v-model={state.virtualColFlag}/></FormItem>
      </Form>
      <Table
        data={DATA}
        summaryData={summaryData}
        virtual={state.virtualRowFlag}
        virtualColumn={state.virtualColFlag}
        showRows={10}
      >
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'颜色'} field={'color'}/>
        <Plc title={'名称'} field={'name'}/>
        <Plc title={'日期'} field={'date'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'尺寸'} field={'size'}/>
        <Plc title={'地址'} field={'addr'}/>
        <Plc title={'URL'} field={'url'}/>
        <Plc title={'域名'} field={'domain'}/>
        <Plc title={'协议'} field={'protocol'}/>
        <Plc title={'邮箱'} field={'email'}/>
        <Plc title={'IP'} field={'ip'}/>
        <Plc title={'标识'} field={'flag'}/>
        <Plc title={'开始时间'} field={'dateStart'}/>
        <Plc title={'结束时间'} field={'dateEnd'}/>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'颜色'} field={'color'}/>
        <Plc title={'名称'} field={'name'}/>
        <Plc title={'日期'} field={'date'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'尺寸'} field={'size'}/>
        <Plc title={'地址'} field={'addr'}/>
        <Plc title={'URL'} field={'url'}/>
        <Plc title={'域名'} field={'domain'}/>
        <Plc title={'协议'} field={'protocol'}/>
        <Plc title={'邮箱'} field={'email'}/>
        <Plc title={'IP'} field={'ip'}/>
        <Plc title={'标识'} field={'flag'}/>
        <Plc title={'开始时间'} field={'dateStart'}/>
        <Plc title={'结束时间'} field={'dateEnd'}/>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'颜色'} field={'color'}/>
        <Plc title={'名称'} field={'name'}/>
        <Plc title={'日期'} field={'date'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'尺寸'} field={'size'}/>
        <Plc title={'地址'} field={'addr'}/>
        <Plc title={'URL'} field={'url'}/>
        <Plc title={'域名'} field={'domain'}/>
        <Plc title={'协议'} field={'protocol'}/>
        <Plc title={'邮箱'} field={'email'}/>
        <Plc title={'IP'} field={'ip'}/>
        <Plc title={'标识'} field={'flag'}/>
        <Plc title={'开始时间'} field={'dateStart'}/>
        <Plc title={'结束时间'} field={'dateEnd'}/>
      </Table>
    </DemoRow>
  );
});

export const demo4 = designPage(() => {

  const state = reactive({
    virtualRowFlag: true,
  });

  const DATA = SourceData.slice(0, 2);
  const summaryData = SourceData.slice(SourceData.length - 2);

  return () => (
    <DemoRow title="数据不够时有个最小高度">
      <Form>
        <FormItem label="开启行虚拟滚动"><Switch v-model={state.virtualRowFlag}/></FormItem>
      </Form>
      <Table
        data={DATA}
        summaryData={summaryData}
        virtual={state.virtualRowFlag}
        showRows={10}
      >
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'颜色'} field={'color'}/>
        <Plc title={'名称'} field={'name'}/>
        <Plc title={'日期'} field={'date'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'尺寸'} field={'size'}/>
        <Plc title={'地址'} field={'addr'}/>
        <Plc title={'URL'} field={'url'}/>
        <Plc title={'域名'} field={'domain'}/>
        <Plc title={'协议'} field={'protocol'}/>
        <Plc title={'邮箱'} field={'email'}/>
        <Plc title={'IP'} field={'ip'}/>
        <Plc title={'标识'} field={'flag'}/>
        <Plc title={'开始时间'} field={'dateStart'}/>
        <Plc title={'结束时间'} field={'dateEnd'}/>
      </Table>
    </DemoRow>
  );
});
*/
